<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <div class="list">
                        <span>关键字搜索:</span>
                        <Input v-model="keyword" placeholder="请输入塔机编号" style="width: 200px"  maxlength="15" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list">
                        <span>起吊时间:</span>
                        <DatePicker type="datetime" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd HH:mm:ss" v-model="startTime" :clearable="false"></DatePicker>
                    </div>
                    <div class="list">
                        <span>卸吊时间:</span>
                        <DatePicker type="datetime" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd HH:mm:ss" v-model="endTime" :clearable="false"></DatePicker>
                    </div>
                    <div class="list">
                        <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                        <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="list" style="width: 100%" :stripe='true'>
                        <el-table-column fixed prop="time" label="日期" width="100"></el-table-column>
                        <el-table-column prop="code" label="塔机编号"></el-table-column>
                        <el-table-column prop="startTime" label="起吊时间"></el-table-column>
                        <el-table-column prop="endTime" label="卸吊时间"></el-table-column>
                        <el-table-column prop="startHeight" label="开始高度(m)" ></el-table-column>
                        <el-table-column prop="endHeight" label="结束高度(m)" ></el-table-column>
                        <el-table-column prop="startRange" label="开始幅度(m)" ></el-table-column>
                        <el-table-column prop="endRange" label="结束幅度(m)" ></el-table-column>
                        <el-table-column prop="maxWeight" label="最大吊重(t)"></el-table-column>
                    </el-table>
                </div>
                <div class="clearfix"  >
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCraneRecordList } from "@/api/api.js";
import { formatDate } from "@/sever/utils.js";
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            list: [],
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            startTime: new Date(new Date().valueOf() - 86400000),
            endTime: new Date(),
            keyword: ""
        };
    },
    methods: {
        getAllList() {
            let params = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyword: this.keyword,
                startTime: formatDate(this.startTime, "yyyy-MM-DD HH:mm:ss"),
                endTime: formatDate(this.endTime, "yyyy-MM-DD HH:mm:ss")
            };
            getCraneRecordList(params)
                .then(res => {
                    if (res.code == 200) {
                        res.data.list.forEach(i => {
                            i["time"] = i.startTime.substring(0, 10);
                            i.startTime = i.startTime.substring(11, 16);
                        });
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        searchAll() {
            if(this.startTime.getTime() >= this.endTime.getTime()){
                this.$Modal.warning({
                    title: "提示",
                    content: "起吊时间不能在卸吊时间之前"
                });
                return;
            }
            this.current = 1;
            this.pageNum = 1;
            this.getAllList();
        },
        clear() {
            this.current = 1;
            this.pageNum = 1;
            this.keyword = "";
            this.startTime = new Date(new Date().valueOf() - 86400000);
            this.endTime = new Date();
            this.getAllList();
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.deptName;
                this.startTime = new Date(new Date().valueOf() - 86400000);
                this.endTime = new Date();
                this.pageNum = 1;
                this.current = 1;
                this.keyword = "";
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/slider.less";
@import "./../../assets/style/themeBase.less";

/deep/.el-table__row{
    background-color: #F1F4F7 ;
}
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
    background-color: #FDFDFD ;
}
</style>
